<template>
    <el-dialog title="上传完税证明" v-model="dialog.openCheck" width="38%" append-to-body @close="closeCheckDialog">
      <el-form :model="mdyForm"  :rules="mdyRules"  ref="dialogRef" label-width="120px" label-suffix=":">
        <el-form-item label="完税证明" prop="file">
            <fileUpload v-model="mdyForm.file" :limit="1" :fileType="['zip']" :isGetUrl="true"/>
        </el-form-item>
        <el-form-item label="备注" prop="remarer">
          <el-input v-model="mdyForm.remarer" type="textarea"  :rows="6" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="mdyLoading" @click="mdySubmit">确 定</el-button>
          <el-button @click="closeCheckDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script name="uploadWs" lang="ts" setup>
  
   const pros = defineProps(['title','openCheck','id','item']);
   const emit = defineEmits(['dialogClose', 'dialogSubmit'])
  
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
   const dialogRef = ref<ElFormInstance>()
  
   const dialog = ref({
      title:'',
      openCheck:false,
      id:null,
      item:null
   })
  
   const mdyForm = ref({
      checkType:"2",
      file:'',
      remarer:"",
      id:pros.id,
      item:null
   });
  
   const mdyLoading = ref(false)
  
  
   const bohuiValidate = (rule: any, value: string, callback: any)=>{
        if(mdyForm.value.checkType == "1" && !value){
              callback(new Error("驳回请输入审核意见"));
        } else {
          callback();
        }
   }
  
   const fileValidate = (rule: any, value: string, callback: any)=>{
        if(mdyForm.value.checkType == "2" && !value){
              callback(new Error("请上传支付凭证"));
        } else {
          callback();
        }
  
   }
  
   const mdyRules = ref({
      checkType: [{ required: true, message: "请选择审核操作", trigger: "blur" }],
      file: [{ required: true, message: "请上传完税证明", trigger: "blur" }],
      remarer: [{ validator: bohuiValidate, trigger: "blur" }],
  });
  
   dialog.value.title = pros.title;
   dialog.value.openCheck = pros.openCheck;
  
    const closeCheckDialog =()=>{
      dialog.value.openCheck = false;
      mdyForm.value = {
          checkType:"2",
          file:'',
          remarer:"",
          id:pros.id,
          item:null
      }
      emit('dialogClose', { openCheck:dialog.value.openCheck })
    }
  
  
  
  
    const mdySubmit = ()=>{
      console.log( mdyForm.value);
      dialogRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            mdyLoading.value = true;
            mdyForm.value.item = dialog.value.item;
            mdyForm.value.id = dialog.value.item.id;
            emit('dialogSubmit', mdyForm.value)
        }})
    }
  
    const hideLoad =  ()=>{
      mdyLoading.value = false;
      mdyForm.value = {
          checkType:"2",
          file:'',
          remarer:"",
          id:pros.id,
          item:null
      }
    }
  
  
  watch(() => pros.openCheck, async val => {
     if(val){
       dialog.value.openCheck = true;
     }else{
       dialog.value.openCheck = false;
     }
  })
  
    watch(() => pros.item, async val => {
      dialog.value.item = val;
    })
  
    watch(() => pros.id, async val => {
      dialog.value.id = val;
    })
  
    watch(() => pros.title, async val => {
      dialog.value.title = val;
    })
  
    defineExpose({
        hideLoad
      });
  </script>
  
  <style>
    .el-dialog__header{
      border-bottom: 1px solid #e8e8e8;
      padding-bottom:15px;
      margin-right:0;
    }
  
    .el-dialog__footer{
       border-top: 1px solid #e8e8e8;
    }
  </style>
  